<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin: 0px auto;
            width: 800px;
            background-color: #f1f3f4;
        }
        input{
            outline-color:#0000ff;
        }
        textarea{
            outline-color:#0000ff;
        }
        td{
            text-align: right;
            font-size: 10px;
        }
        .a td{
            text-align: center;
            height: 60px;
            font-size: 30px;
            color: rgb(255, 255, 255);
            background-color: blueviolet;
        }
        .b{
            text-align: left;
            width: 500px;
            height: 40px;
        }
        .b input{
            display: inline-block;
            width: 200px;
            height: 20px;
        }
        .b textarea{
            width: 300px;
            height: 100px;
        }
        .d{
            height: 40px;
        }
        .c input[type="radio"]{
            float: left;
        }
        .c div{
            display: inline-block;
            float: left;
        }
        .e{
            height: 100px;
        }
        .r{
            text-align: center;
            height: 70px;
        }
    </style>
</head>
<body>
    <table cellspacing="0px">
        <tr class="a">
            <td colspan="2">留言簿</td>
        </tr>
        <tr>
            <td>你的姓名：</td>
            <td class="b"><input type="text"></td>
        </tr>
        <tr>
            <td>你的邮箱：</td>
            <td class="b"><input type="text"></td>
        </tr>
        <tr>
            <td>您的网站：</td>
            <td class="b"><input type="text"></td>
        </tr>
        <tr>
            <td>其他联系方式：</td>
            <td class="b"><input type="text">*(如:QQ,MSN,电话等)</td>
        </tr>
        <tr>
            <td>留言内容：</td>
            <td class="b"><textarea></textarea></td>
        </tr>
        <tr>
            <td class="d">请选择表情：</td>
            <td class="c">
                <div><input type="radio" name="aa" class="q"><img src="img/face1.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/face2.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/face3.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/face4.gif"></div>
        </tr>
        <tr>
            <td class="e">请选择头像：</td>
            <td class="c">
                <div><input type="radio" name="aa" class="q"><img src="img/pic1.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/pic2.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/pic3.gif"></div>
                <div><input type="radio" name="aa" class="q"><img src="img/pic4.gif"></div>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="r">
                <button>提交</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button>取消</button>
            </td>
        </tr>
    </table>
</body>
</html>